<template>
	<view class="content_box1">
		<header-box :title="'汇总明细'"></header-box>





		<!-- 已填写的内容 -->
		<block v-for="(item,index) in arrList" :key="index">
			<view class="pt22 pb100 hh100" style="background-color: #9885F8;">

				<view class=" pl22  pt53 r20 ml22 mr22" style="background-color: #FFFFFF;" v-if="item.flow_name">
					<view class="info-text flex align-center justify-center" >
						<view class="bgc1">
						</view>
						<text class="fs30">
							{{item.flow_name}}
						</text>
						<view class="bgc2">
						</view>
					</view>
					
					
					<!-- 1文本 2单选 3多选 4时间 5文件 v-for="(item,index) in arrList.detail" :key="index"  v-if="item.type == 4" -->
					<view v-for="(item1,index) in item.explan" v-if="item1.type == 1">
						<view class="flex align-center mt20">
							<view class="cuIcon-round-icon mr19"></view> <text class="f28 ">{{item1.title}}</text>
						</view>
					
						<view class="r10 h60 lh60 bgc mt20 ww90 ml38 pl20">
							<!-- <input type="text" value="" placeholder="请选择" style="height: 100%;" /> -->
							<text>{{item1.text}}</text>
						</view>
					</view>
					
					<!-- 单选 -->
					<view v-for="(item1,index) in item.explan" v-if="item1.type == 2">
						<view class="flex align-center mt20 mb20">
							<text class="f28">{{item1.title}}</text>{{item1.type}}
						</view>
					
						<view class="r10 h60 lh60 mt20 ww90 ml38 pl20">
							<text>{{item1.checkedText}}</text>
						</view>
					
					</view>
					
					<!-- 多选 -->
					<view v-for="(item1,index) in item.explan" v-if="item1.type == 3">
						<view class="flex align-center mt20">
							<view class="cuIcon-round-icon mr19"></view> <text class="f28">{{item1.title}}</text>
						</view>
					
						<block v-for="(item2, id) in item1.list" :key="id">
							<view class="flex align-center r10 h60 lh60 mt20 ww90 ml38 pl20">
								<text>{{item2.text}}</text>
							</view>
						</block>
					
					</view>
					
					<!-- 时间 -->
					<view v-for="(item1,index) in item.explan" v-if="item1.type == 4" class="pb20">
						<view class="flex align-center mt20">
							<view class="cuIcon-round-icon mr19"></view> <text class="f28">{{item1.title}}</text>
						</view>
					
						<view class="r10 h60 lh60 bgc mt20 ww90 ml38 pl20 ">
							<text>{{item1.timeInfo}}</text>
						</view>
					</view>
					
					
					<!-- 上传图片 -->
					<view v-for="(item1,index) in item.explan" v-if="item1.type == 5" class="pd20">
						<view class="flex align-center mt20">
							<view class="cuIcon-round-icon mr19"></view> <text class="f28">{{item1.title}}</text>
						</view>
					
						<view class="">
							
							<image :src="imgs + item1.images" mode="" @tap="imgss(item1.images)"></image>
						</view>
					</view>
					
					
					
					<view v-if="item.staff_ids" class="u-border-bottom  flex h80 align-center justify-between pr22">
						<view class="flex align-center">
							<view class="cuIcon-round-icon mr19"></view> <text class="f28">配合的员工</text>
						</view>
						<view class="" style="color: #717171;">
							{{item.staff_ids}}
						</view>
					</view>
				</view>
			</view>


			<!-- <view class="ww100 mt37 mb40 ml22 mr22">
				<button type="default" class="cu-btn ww90 h98 r49 f34 mr51"
					style="color: #A18710; background-color: #FFE985;" @tap="addSet(item.id)">
					确定
				</button>
			</view> -->
		</block>


		<yy-home></yy-home>



		<!-- 负责人 -->
		<u-popup v-model="principal" border-radius="20" :closeable="true" mode="bottom">
			<view class="mt38 ww100 text-center mb68">请选择配合的员工</view>
			<view class="flex justify-between align-center u-border-bottom pl22 pr22 pb20"
				v-for="(item, inedx ) in arrList.staff" :key="index">
				<view class="flex align-center ">
					<image class="w80 h80 r40" :src="item.avatar" mode=""></image>
					<text class="ml20">{{item.staff_name}}</text>
				</view>
			</view>

			<view class="ww100 text-center mt20 mb60">
				<button type="default" class="cu-btn ww94 h90 r45"
					style="background-color: #FFE985; color: #A18710;">确认选择</button>
			</view>
		</u-popup>

		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				value2: '是',
				value3: '',
				arrList: {},
				name: '',
				showTime: false,
				listIndex: '',
				principal: false,
				stepId: '',
				userNmae: '',
				info: '',
				staff_ids: '',
				check: '',
				stepListFrom: [],
				textVal: '',
				imgs: this.$images,
			};
		},
		onShow() {},
		onLoad(e) {
			this.init = e.text
			this.getStockList(e.id)
		},
		methods: {
			
			imgss(urls) {
				uni.previewImage({
					urls:[urls],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			

			// 列表
			async getStockList(id) {
				if(this.init == 88) {
					// api/process/flow_user_all?process_id=2
					const res = await this.$u.post("api/process/flow_user_all", {
						process_id: id,
					})
					this.arrList = res.data
					console.log('this.arrList ==>', this.arrList );
				} else {
					const res = await this.$u.post("api/process/flow_user_sureInfo", {
						process_id: uni.getStorageSync('flow_step'), // 
						flow_id: id,
					})
					this.arrList = res.data
					console.log('this.arrList==>', this.arrList);
				}

				

				// var obj = {}
				// this.arrList.detail.forEach((item, index) => {
				// 	if (item.type == 2) {
				// 		for (let key in item.answer) {
				// 			obj[key] = item.answer[key];
				// 		};
				// 		var bj = Object.keys(obj).map(val => ({
				// 			text: obj[val],
				// 			checked: false,
				// 		}));
				// 		item.answer = bj
				// 	}

				// 	if (item.type == 3) {
				// 		for (let key in item.answer) {
				// 			obj[key] = item.answer[key];
				// 		};
				// 		var bj = Object.keys(obj).map(val => ({
				// 			text: obj[val],
				// 			checked: false,
				// 		}));
				// 		item.answer = bj
				// 	}
				// })

			},

			showTimeProp(ind) {
				console.log(ind)
				this.showTime = true
				this.listIndex = ind
			},

			addTime(time) {
				this.arrList.detail[this.listIndex].timeInfo = time.year + '-' + time.month + '-' + time.day + ' ' + time
					.hour +
					':' + time.minute

			},

			async addSet(id) {
				console.log(this.value3)
				if (this.info == 88) {
					const res = await this.$u.post("api/process/flow_user_update", {
						user_id: uni.getStorageSync('uid'), // 流程id
						id, // 步骤
					})

					if (res.code == 1) {
						this.$tools.msg(res.msg)

						this.$tools.back()
					} else {
						this.$tools.msg(res.msg)
					}
				} else {

					this.arrList.detail[0].value = this.textVal
					const res = await this.$u.post("api/process/flow_user_add", {
						process_id: uni.getStorageSync('userId'), // 外层员工id
						flow_id: this.stepId, // 步骤
						staff_id: uni.getStorageSync('staff_id'), // 	负责人id
						staff_ids: this.staff_ids, // 确认员工
						explan: JSON.stringify(this.arrList.detail), // 负责人操作
					})

					if (res.code == 1) {
						this.$tools.msg(res.msg)

						this.$tools.back(2)
					} else {
						this.$tools.msg(res.msg)
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content_box1 {
		width: 100%;
		height: 100%;
		padding-bottom: 100rpx;
		background-color: #9885F8;

		.header {
			width: 100%;
			height: 150rpx;
			line-height: 150rpx;
			display: flex;
			align-items: center;
			// padding-left: 10rpx;
			padding-top: 30rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			background: linear-gradient(to right, #656CE6, #9397FC);

			.arrow {
				position: relative;
				display: inline-block;
			}

			.arrow::before {
				content: '';
				width: 10px;
				height: 10px;
				border: 0px;
				border-bottom: solid 2px #fff;
				border-left: solid 2px #fff;
				-ms-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -4px;
				margin-left: 28rpx;
			}

			.title {
				color: #fff;
				margin: 0 auto;
			}
		}

		.cuIcon-round-icon {
			width: 18rpx;
			height: 18rpx;
			border-radius: 9rpx;
			background-color: #FBE161;
		}

		.bgc {
			background-color: #EFECFF;
		}

		.radio-text {
			padding-bottom: 57rpx;
			text-align: center;
			display: flex;
			margin: 0 22rpx !important;
			align-items: center;
			justify-content: center;
			background-color: #FFFFFF;
			border-radius: 0 0 20rpx 20rpx;

			/deep/.u-radio {
				width: 168rpx !important;
				height: 60rpx;
				background: #EFECFF;
				border-radius: 30rpx;
				margin-right: 20rpx;
				text-align: center !important;
				line-height: 60rpx;
				text-align: center;
			}

			/deep/.u-radio__icon-wrap--circle.data-v-0498b190 {
				border-radius: 100%;
				margin: 0 27rpx;
			}

		}



		.info-text {
			font-weight: bold;
			font-family: PingFang SC;

			.bgc1 {
				width: 60rpx;
				height: 16rpx;
				border-radius: 8rpx;
				margin-right: 16rpx;
				background-image: linear-gradient(45deg, #FFFFFF, #FA469D);
			}

			.bgc2 {
				width: 60rpx;
				height: 16rpx;
				border-radius: 8rpx;
				margin-left: 16rpx;
				background-image: linear-gradient(45deg, #FA469D, #FFFFFF);
			}
		}
	}
</style>
